import React, { useState } from "react";
import {  NavBar, Tabs, Button } from "antd-mobile";
import { ProductCard , Sticky ,Popup ,Cell} from "react-vant";
import { useLocation, useNavigate } from "react-router-dom";
import { ExclamationCircleOutline, SendOutline ,LinkOutline} from "antd-mobile-icons";
import ChatRoom from '../../components/ChartRoom';
import img from "../../assets/1.png";
import "./index.scss";

const Index: React.FC = () => {

     interface TabItem{
      key:string,
      title:string,
      img:string,
      children?:Array<TabItem>,
      id?:string
    }

  const location = useLocation();
  const navigate = useNavigate();
  console.log(location, 111111);
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [list, setList] = useState(location.state);
  const [gzflag,setgzflag]=useState(false)
  const [state, setState] = useState('')
  const back = () => {
    navigate(-1);
  };
  const kg=()=>{
    setgzflag(!gzflag)
  }
  const ask= (items: TabItem) => {
    navigate("/ask",{state:items});
  }
   const towatch= (items: TabItem) => {
    navigate("/watchvideo",{state:items});
  }
 
  const onClose = () => setState('')
  return (
    <div>
      <Sticky>
      <NavBar
        onBack={back}
        right={
          <>
            <ExclamationCircleOutline fontSize={20} onClick={() =>navigate("/complaint")}/>&emsp;&emsp;
            <SendOutline fontSize={20} onClick={() => setState('bottom')}/>
          </>
        }
      >
        {list.items.title}
      </NavBar>
      </Sticky>
      <div>
        <div className="mp4">
          <video controls id="video1">
            <source
              src="https://lf9-static.bytednsdoc.com/obj/eden-cn/uhbfnupkbps/video/earth_v6.mp4"
              type="video/mp4"
            />
          </video>
        </div>
        <main>
          <Tabs>
            <Tabs.Tab title="文稿" key="fruits">
              <ProductCard
                thumb={img}
                desc={list.items.name}
                title={list.items.Department}
                tags={
                  <>
                  {gzflag ? <Button className="btnyes" onClick={() => kg()}>
                      <span className="wgzy">已关注</span>
                    </Button>:<Button className="btnno" onClick={() =>kg()}>
                      <span className="wgz">+关注</span>
                    </Button>}
                  </>
                }
              />
              <div className="butts">
                <Button color='primary' fill='outline' onClick={() =>towatch(list.items)}>观看课堂</Button>
                <Button color='primary' fill='outline' onClick={() =>ask(list.items)}>去问TA</Button>
              </div>
            </Tabs.Tab>
            <Tabs.Tab title="互动" key="vegetables">
               <ChatRoom />
            </Tabs.Tab>
          </Tabs>
        
     
      <Popup visible={state==='bottom'} onClose={onClose}  style={{ height: '30%' }}
        position='bottom'>
        <div style={{ display: 'flex', justifyContent: 'space-around' ,padding:'15px',}}>
          <img src="../../../public/image/wx.png" alt="" />
          <img src="../../../public/image/pyq.png" alt="" />
          <img src="../../../public/image/wb.png" alt="" />
          <img src="../../../public/image/qq.png" alt="" />
        </div>
        <div>
          <Cell><LinkOutline />复制链接</Cell>
          <p style={{ textAlign: 'center'}} onClick={onClose}>取消</p>
        </div>
      </Popup>
        </main>
      </div>
    </div>
  );
};

export default Index;
